<template>
  <div class="newlist">
     <ul class="mui-table-view">
		<li v-for="item in newlist" :key="item.id" class="mui-table-view-cell mui-media">
			<router-link :to="'/HEADER/NEWLIST/'+item.id" >
				<img class="mui-media-object mui-pull-left" :src="item.img">
				<div class="mui-media-body">
					<h4>{{item.title}}</h4>
					<div>
						<p class='mui-ellipsis'>{{item.txt}}</p>
						<span>
							<p>点击次数：</p><p style="color:blue">{{item.click}}次</p>
						</span>
						
					</div>					
				</div>
			</router-link>
		</li>
	</ul>
  </div>
</template>

<script>
export default {
	data(){
		return{
			newlist:[]
		}
	},
	methods:{
		getnewlist(){
			this.$http.get("http://localhost:3000/getnewlist").then((result)=>{
				this.newlist = result.body;
			})
		}
	},
	created(){
		this.getnewlist()
	}
}
</script>

<style lang = 'less' scoped>
	.newlist{
		.mui-table-view{
			max-height: 70px;
			>li{
				>a{
					padding: 5px;
					>img{
						margin-left: 5px;
						    line-height: 47px;
							max-width: 79px;
    						height: 60px;
					}
					>div{
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						height: 60px;
						>div{
							display: flex;
							flex-direction: row;
							justify-content: space-between;
							padding-right: 8px;
							>p{
								font-size: 12px;
								margin-top: 5px;
							}
							>span{								
								>p{
									font-size: 12px;
									margin-top: 5px;
									float: left;
								}
							}
						}
					}
				}
			}
		}
	}
</style>